<template>
  <div>
     <h1>补全信息</h1>
     <span>资质图片</span>
     <el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-change="handleRemove"
  :before-upload="beforeAvatarUpload">
  <img v-if="userCertPhoto" :src="userCertPhoto" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

<span>身份证图片</span>
     <el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-change="handleRemove2"
  :before-upload="beforeAvatarUpload">
  <img v-if="userIdPhoto" :src="userIdPhoto" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

 <!-- <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-change="handleRemove"
      multiple
      :limit="3"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload> -->
      <!-- <span>身份证图片</span> -->
     <!-- <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-change="handleRemove1"
      multiple
      :limit="3"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload> -->
    <div>
      公司名字  <input type="text" v-model="userCompany">  <br>
       <input type="button" value="补全信息" @click="add">
    </div>
    </div>
</template>

<script>
export default {
   data(){
     return{
      userCertPhoto: '',
      userCompany:'',
      userIdPhoto:'',
      userId:'',
      userName:'',
      userPassword:"",
      userRealName:'',
      userGender:'',
      userPhone:'',
     }
   },
     mounted(){
         let jsonUser = sessionStorage.getItem("user")
         console.log(jsonUser)
         let jsonObj=JSON.parse(jsonUser)
         this.userId = jsonObj.userId
         this.userName = jsonObj.userName
         this.userPassword = jsonObj.userPassword
         this.userRealName = jsonObj.userRealName
         this.userGender = jsonObj.userGender
         this.userPhone = jsonObj.userPhone
     },
   methods:{
   handleRemove(file, fileList) {
      console.log(file);
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = () => {
        console.log("file 转 base64结果:" + reader.result);
        this.userCertPhoto = reader.result
      };
      reader.onerror = function(error) {
        console.log("Error: ", error);
      };
    },

     handleRemove2(file, fileList) {
      console.log(file);
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = () => {
        console.log("file 转 base64结果:" + reader.result);
        this.userIdPhoto = reader.result
      };
      reader.onerror = function(error) {
        console.log("Error: ", error);
      };
    },
     beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
    },
        add(){
          console.log(this.userId)
       let fd = new FormData
       fd.append("userId",this.userId)
       fd.append("userName",this.userName)
       fd.append("userPassword",this.userPassword)
       fd.append("userRealName",this.userRealName)
       fd.append("userGender",this.userGender)
       fd.append("userPhone",this.userPhone)
       fd.append("userCertPhoto",this.userCertPhoto)
       fd.append("userIdPhoto",this.userIdPhoto)
       fd.append("userCompany",this.userCompany)
       this.$axios.post("/api/User/addUserMessage",fd).then(
         res=>{
           alert("成功!")
           console.log(res.data)
           this.$router.push("/")
         }
       )
    },
        }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }


  
</style>
